<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 和控制class类似，也可以直接通过写行内式style来控制样式 -->
        <div :style="{background:isActive?'red':'green',border:isHover?'1px solid #000':''}">
            通过三元表达式判断
        </div>

        <!-- 也可以通过数组来写 -->
        <div :style="[{background:isActive?'red':'green'},{border:isHover?'1px solid #000':''}]">
            数组写法
        </div>
        <div :style="[style1,style2]">直接引入data中的数据</div>
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                isActive: true,
                isHover: true,
                style1: {
                    background: "green"
                },
                style2: {
                    border: "1px solid #000"
                },
            };
        },
    });
</script>